<template>
  <div class="CertificateTable relative">
    <el-table border height="300" :data="listData" :row-class-name="rowClassName">
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="certificate_type" label="证书类型" v-if="props.type == 2">
        <template #default="{ row }">
          <template v-if="handleType != 'view'">
            <el-select
              class="w-full"
              v-model="row.certificate_type"
              filterable
              :disabled="disabled"
            >
              <el-option
                v-for="item in options['goods.GoodsSpu']?.[0].authenticationText"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ formatType(row.certificate_type) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="filename" label="文件名称">
        <template #default="{ row }">
          <el-input
            v-model="row.filename"
            placeholder="请输入文件名称"
            :disabled="disabled"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注说明" v-if="props.type != 2">
        <template #default="{ row }">
          <template v-if="handleType != 'view'">
            <el-input
              v-model="row.remark"
              placeholder="请输入备注说明"
              :disabled="disabled"
            ></el-input>
          </template>
          <template v-else>
            {{ row.remark }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作">
        <template #default="{ row, $index }">
          <el-button type="primary" @click="copyRow(row)" v-if="!disabled"
            >复制</el-button
          >
          <el-button type="primary" @click="download(row)">下载</el-button>
          <el-button type="danger" @click="deleteRow(row, $index)" v-if="!disabled"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="CertificateTable">
import { copy } from "@/utils/index";
import { downloadFile } from "@/utils/downloadFile.js";
let handleType = reactive(inject("handleType"));

const emit = defineEmits(["update:modelValue", "change"]);
let options = reactive(inject("options"));
const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
  type: {
    type: [Number, String],
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const listData = computed({
  get: () => props.list || [],
  set: (val) => {
    emit("update:modelValue", val);
  },
});
const formatType = (val) => {
  let list = options.value["goods.GoodsSpu"]?.[0].authenticationText.filter(
    (item) => item.value == val
  );
  if (list && list.length) {
    return list[0].label;
  } else {
    return "";
  }
};

const copyRow = (item) => {
  copy(item.filepath);
};
const download = (item) => {
  downloadFile(item.filepath, item.filename, false);
};

const rowClassName = ({ row }) => {
  if (row.delete === 1) {
    return "hidden-row";
  }
  return "";
};

const deleteRow = (row, index) => {
  if (handleType.value == "edit") {
    listData.value[index].delete = 1;
  } else {
    emit("change", row);
  }
};
</script>

<style lang="scss" scoped>
.hidden-row {
  display: none;
}
</style>
